{% block sw_settings_list %}
{% block sw_settings_tax_index %}
<sw-page class="sw-settings-tax-list">
    {% block sw_settings_tax_list_search_bar %}
    <template #search-bar>
        <sw-search-bar
            initial-search-type="tax"
            :placeholder="$tc('sw-settings-tax.general.placeholderSearchBar')"
            :initial-search="term"
            @search="onSearch"
        />
    </template>
    {% endblock %}

    {% block sw_settings_tax_list_smart_bar_header %}
    <template #smart-bar-header>
        {% block sw_settings_tax_list_smart_bar_header_title %}
        <h2>
            {% block sw_settings_tax_list_smart_bar_header_title_text %}
            {{ $tc('sw-settings.index.title') }}
            <mt-icon
                name="regular-chevron-right-xs"
                size="12px"
            /> {{ $tc('sw-settings-tax.list.textHeadline') }}
            {% endblock %}

            {% block sw_settings_tax_list_smart_bar_header_amount %}
            <span
                v-if="!isLoading"
                class="sw-page__smart-bar-amount"
            >
                ({{ total }})
            </span>
            {% endblock %}
        </h2>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_tax_list_smart_bar_actions %}
    <template #smart-bar-actions>
        {% block sw_settings_tax_list_smart_bar_actions_add %}
        <mt-button
            v-tooltip.bottom="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('tax.creator'),
                showOnDisabledElements: true
            }"
            class="sw-settings-tax-list__button-create"
            variant="primary"
            :disabled="!acl.can('tax.creator') || undefined"
            size="default"
            @click="$router.push({ name: 'sw.settings.tax.create' })"
        >
            {{ $tc('sw-settings-tax.list.buttonAddTax') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}

    <template #language-switch>
        <sw-language-switch
            @on-change="onChangeLanguage"
        />
    </template>

    {% block sw_settings_tax_list_content %}
    <template #content>
        <sw-card-view>
            {% block sw_settings_tax_list_content_card %}
            <mt-card
                position-identifier="sw-settings-tax-list-content"
                class="sw-tax-card"
                :title="$tc('sw-settings-tax.list.taxCardTitle')"
                :is-loading="isLoading"
            >
                <template #grid>
                    {% block sw_settings_tax_list_grid %}
                    <sw-entity-listing
                        ref="swSettingsTaxGrid"
                        class="sw-settings-tax-list-grid"
                        detail-route="sw.settings.tax.detail"
                        :items="tax"
                        :columns="getTaxColumns()"
                        :repository="taxRepository"
                        :full-page="false"
                        :show-selection="false"
                        :is-loading="isLoading"
                        :allow-view="acl.can('tax.viewer') || undefined"
                        :allow-edit="acl.can('tax.editor') || undefined"
                        :allow-inline-edit="acl.can('tax.editor') || undefined"
                        :allow-delete="acl.can('tax.deleter') || undefined"
                        :disable-data-fetching="true"
                        :sort-by="sortBy"
                        :sort-direction="sortDirection"
                        @column-sort="onSortColumn"
                        @page-change="onPageChange"
                        @inline-edit-save="onInlineEditSave"
                        @inline-edit-cancel="onInlineEditCancel"
                    >
                        {% block sw_settings_tax_list_grid_column_default_name %}
                        <template #column-name="{ item, column, isInlineEdit, compact }">
                            {# if it is not a default tax, the default slot content will be rendered #}
                            <router-link
                                v-if="isShopwareDefaultTax(item)"
                                class="sw-data-grid__cell-value"
                                :to="{ name: column.routerLink, params: { id: item.id } }"
                            >
                                {{ getLabel(item) }}
                            </router-link>
                        </template>
                        {% endblock %}

                        {% block sw_settings_tax_list_grid_column_default_tax_rate %}
                        <template #column-taxRate="{ item, isInlineEdit, compact }">
                            <template v-if="isInlineEdit">
                                <mt-number-field
                                    v-model="item.taxRate"
                                    :digits="3"
                                    :size="compact ? 'small' : 'default'"
                                >
                                    <template #suffix>
                                        <span>
                                            <span v-html="$sanitize($tc('sw-settings-tax.general.taxRateSymbol'))"></span>
                                        </span>
                                    </template>
                                </mt-number-field>
                            </template>
                            <template v-else>
                                {{ item.taxRate }}%
                            </template>
                        </template>
                        {% endblock %}

                        {% block sw_settings_tax_list_grid_column_default %}
                        <template #column-default="{ item, isInlineEdit }">
                            <template v-if="isInlineEdit">
                                {% block sw_settings_tax_list_grid_column_default_editor %}
                                <mt-checkbox
                                    :checked="isSelectedDefaultRate(item)"
                                    @update:checked="value => setSelectedDefaultRate(value, item.id)"
                                />
                                {% endblock %}
                            </template>
                            <template v-else>
                                {% block sw_settings_tax_list_grid_column_default_label %}
                                <mt-icon
                                    v-if="isSelectedDefaultRate(item)"
                                    name="regular-checkmark-xs"
                                    size="16px"
                                    class="is--active"
                                />
                                <div v-else></div>
                                {% endblock %}
                            </template>
                        </template>
                        {% endblock %}

                        {% block sw_settings_tax_list_grid_columns_actions %}
                        <template #actions="{ item }">
                            {% block sw_settings_tax_list_grid_columns_actions_edit %}
                            <sw-context-menu-item
                                class="sw-tax-list__edit-action"
                                :disabled="!acl.can('tax.editor') || undefined"
                                :router-link="{
                                    name: 'sw.settings.tax.detail',
                                    params: { id: item.id, edit: 'edit' }
                                }"
                            >
                                {{ $tc('sw-settings-tax.list.contextMenuEdit') }}
                            </sw-context-menu-item>
                            {% endblock %}

                            {% block sw_settings_tax_list_grid_columns_actions_delete %}
                            <sw-context-menu-item
                                class="sw-tax-list__delete-action"
                                variant="danger"
                                :disabled="!acl.can('tax.deleter') || undefined"
                                @click="onDelete(item.id)"
                            >
                                {{ $tc('sw-settings-tax.list.contextMenuDelete') }}
                            </sw-context-menu-item>
                            {% endblock %}
                        </template>
                        {% endblock %}

                        {% block sw_settings_tax_list_grid_action_modals %}
                        <template #action-modals="{ item }">
                            {% block sw_settings_tax_list_delete_modal %}
                            <sw-modal
                                v-if="showDeleteModal === item.id"
                                :title="$tc('global.default.warning')"
                                variant="small"
                                @modal-close="onCloseDeleteModal"
                            >
                                {% block sw_settings_tax_list_delete_modal_confirm_delete_text %}
                                <p class="sw-settings-tax-list__confirm-delete-text">
                                    {{ $tc('sw-settings-tax.list.textDeleteConfirm', { name: item.name }, 0) }}
                                </p>
                                {% endblock %}

                                {% block sw_settings_tax_list_delete_modal_footer %}
                                <template #modal-footer>
                                    {% block sw_settings_tax_list_delete_modal_cancel %}
                                    <mt-button
                                        size="small"
                                        variant="secondary"
                                        @click="onCloseDeleteModal"
                                    >
                                        {{ $tc('global.default.cancel') }}
                                    </mt-button>
                                    {% endblock %}

                                    {% block sw_settings_tax_list_delete_modal_confirm %}
                                    <mt-button
                                        variant="critical"
                                        size="small"
                                        @click="onConfirmDelete(item.id)"
                                    >
                                        {{ $tc('sw-settings-tax.list.buttonDelete') }}
                                    </mt-button>
                                    {% endblock %}
                                </template>
                                {% endblock %}
                            </sw-modal>
                            {% endblock %}
                        </template>
                        {% endblock %}
                    </sw-entity-listing>
                    {% endblock %}
                </template>
            </mt-card>
            {% endblock %}

            <mt-card
                position-identifier="sw-settings-tax-provider-list-content"
                class="sw-settings-tax-provider-list-content"
                :title="$tc('sw-settings-tax.list.taxProvider.cardTitle')"
                :is-loading="isLoading"
            >
                <template #grid>
                    <template v-if="showChangePriority">
                        <div class="sw-settings-tax-provider-list-content__bg">
                            <sw-button-process
                                class="sw-settings-tax-provider-list-button__change-priority"
                                :disabled="isLoading"
                                :is-loading="isLoading"
                                :process-success="false"
                                variant="primary"
                                ghost
                                @click="showSortingModal = true"
                            >
                                {{ $tc('sw-settings-tax.list.taxProvider.changePriorityButton') }}
                            </sw-button-process>
                        </div>
                    </template>

                    <template v-if="!isLoading">
                        <sw-empty-state
                            v-if="noTaxProvidersFound"
                            :title="$tc('sw-settings-tax.list.taxProvider.messageEmptyTitle')"
                            :absolute="false"
                            :show-description="false"
                        />

                        <div
                            v-else
                            class="sw-tax-provider-items"
                        >
                            <template
                                v-for="taxProvider in taxProviders"
                                :key="taxProvider.id"
                            >
                                <div
                                    class="sw-tax-provider-item"
                                >
                                    <div class="sw-tax-provider__name">
                                        {{ taxProvider.translated.name }}
                                    </div>

                                    <div class="sw-tax-provider__link">
                                        <router-link
                                            class="sw-tax-provider__show-detail-link"
                                            :to="editLink(taxProvider.id)"
                                            :disabled="!acl.can('tax.editor') || undefined"
                                        >
                                            {{ $tc('sw-settings-tax.list.taxProvider.editDetailsLink') }}
                                        </router-link>
                                    </div>

                                    <mt-switch
                                        :label="$tc('sw-settings-tax.list.taxProvider.labelActive')"
                                        :disabled="!acl.can('tax.editor') || undefined"
                                        :model-value="taxProvider.active"
                                        @update:model-value="onChangeTaxProviderActive(taxProvider)"
                                    />
                                </div>
                            </template>
                        </div>
                    </template>

                    <template v-else>
                        <sw-skeleton />
                    </template>
                </template>
            </mt-card>

            <sw-settings-tax-provider-sorting-modal
                v-if="showSortingModal"
                :tax-providers="taxProviders"
                @modal-close="showSortingModal = false"
                @modal-save="loadTaxProviders"
            />
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
    {% endblock %}
{% endblock %}
